<template>
    <div class="map">
        <div id="map"></div>
    </div>
</template>

<script>
export default {
    data(){
      return {
          map:null,  //地图对象
      };
    },
    props:{
        position:{
            type:Array,
            default(){
                return [];
            }
        }
    },
    mounted(){
        this.loadMap()
            .catch();
    },
    methods:{
        /**
         * 加载地图
         */
        loadMap(){
            return new Promise((success)=>{
                var mapData = {
                    zoom:16
                };
                this.map = new this.$map.Map("map",mapData);
                if(this.position.length > 0){
                    this.map.setCenter(this.position);
                    this.map.add(
                        new this.$map.Marker({
                            position:this.position
                        })
                    );
                }
                success();
            });
        }
    }
};
</script>

<style scoped>

</style>
